import { AtActivityIndicator } from 'taro-ui'
import { useState, useEffect } from 'react'
import Taro, { useLoad } from '@tarojs/taro'
import HotItem from '@/components/HotItem/index'
import { getHotListService } from '@/api/hot'
import { HotInfo } from '@/components/HotItem/type'
import Divider from '@/components/Divider'
import { useSelector } from 'react-redux'
import Styles from './index.module.scss'

export default function Hot() {
  const token = useSelector((state: any) => state.user.token)

  const [hotList, setHotList] = useState<HotInfo[]>([])
  //获取热榜信息
  const getHotList = async () => {
    try {
      const res = await getHotListService()
      setHotList(res.data.hotProductList)
      console.log('res:', res)
    } catch (err) {
      console.log(err)
    }
  }

  const handelPay = (event, id) => {
    event.stopPropagation()
    // console.log('token', token)

    if (!token) {
      Taro.showToast({
        title: '请先登录',
        icon: 'none',
      })
    } else {
      Taro.navigateTo({
        url: `/pages/newOrder/index?id=${id}`,
      })
    }
  }

  const handleEnterProductDetailPage = (id) => {
    Taro.navigateTo({
      url: `/pages/productDetail/index?id=${id}`,
    })
  }

  useEffect(() => {
    //getHotList()
    console.log('HotList:', hotList)
  }, [hotList])

  useLoad(() => {
    console.log('Page loaded.')
    getHotList()
  })
  return (
    <>
      {hotList.length > 0 && (
        <div className={Styles.hot_list}>
          <div
            className={Styles.hot_item}
            onClick={() => handleEnterProductDetailPage(hotList[0].id)}
          >
            <div className={Styles.left}>
              <div className={Styles.hot_icon}>
                <img
                  src={require('../../../src/assets/hot/hotFirst.png')}
                  alt=''
                  className={Styles.img_icon}
                />
              </div>
              <div className={Styles.hot_img}>
                <img
                  src={hotList[0]?.coverUrl}
                  alt=''
                  className={Styles.img_hot}
                />
              </div>
            </div>

            <div className={Styles.right}>
              <div className={Styles.hot_title}>{hotList[0].name}</div>
              <div className={Styles.hot_price}>
                <span className={Styles.word}>¥</span>
                {hotList[0].price}
              </div>
              <div className={Styles.buy_btn}>
                <button
                  className={Styles.btn}
                  onClick={(event) => handelPay(event, hotList[0].id)}
                >
                  <span className={Styles.money}>去购买</span>
                </button>
              </div>
            </div>
          </div>
          <div
            className={Styles.hot_item}
            onClick={() => handleEnterProductDetailPage(hotList[1].id)}
          >
            <div className={Styles.left}>
              <div className={Styles.hot_icon}>
                <img
                  src={require('../../../src/assets/hot/hotSecond.png')}
                  alt=''
                  className={Styles.img_icon}
                />
              </div>
              <div className={Styles.hot_img}>
                <img
                  src={hotList[1].coverUrl}
                  alt=''
                  className={Styles.img_hot}
                />
              </div>
            </div>

            <div className={Styles.right}>
              <div className={Styles.hot_title}>{hotList[1].name}</div>
              <div className={Styles.hot_price}>
                <span className={Styles.word}>¥</span>
                {hotList[1].price}
              </div>
              <div className={Styles.buy_btn}>
                <button
                  className={Styles.btn}
                  onClick={(event) => handelPay(event, hotList[1].id)}
                >
                  <span className={Styles.money}>去购买</span>
                </button>
              </div>
            </div>
          </div>
          <div
            className={Styles.hot_item}
            onClick={() => handleEnterProductDetailPage(hotList[2].id)}
          >
            <div className={Styles.left}>
              <div className={Styles.hot_icon}>
                <img
                  src={require('../../../src/assets/hot/hotThird.png')}
                  alt=''
                  className={Styles.img_icon}
                />
              </div>
              <div className={Styles.hot_img}>
                <img
                  src={hotList[2].coverUrl}
                  alt=''
                  className={Styles.img_hot}
                />
              </div>
            </div>

            <div className={Styles.right}>
              <div className={Styles.hot_title}>{hotList[2].name}</div>
              <div className={Styles.hot_price}>
                <span className={Styles.word}>¥</span>
                {hotList[2].price}
              </div>
              <div className={Styles.buy_btn}>
                <button className={Styles.btn}>
                  <span
                    className={Styles.money}
                    onClick={(event) => handelPay(event, hotList[2].id)}
                  >
                    去购买
                  </span>
                </button>
              </div>
            </div>
          </div>
          {/* 取第四个开始渲染 */}
          {hotList.slice(3).map((item, index) => (
            <HotItem key={item.id} item={item} index={index} />
          ))}
          <Divider></Divider>
        </div>
      )}
      {hotList.length === 0 && (
        <AtActivityIndicator mode='center'></AtActivityIndicator>
      )}
    </>
  )
}
